import bg from "./assets/31@2x.webp";
import bg_title from "./assets/4243.svg";

// import icon from "./assets/4240.webp";
import Card1 from "@/views/dashboard/data/Card1";
import RecourseBuild from "./RecourseBuild";
import EmployeeStatus from "@/views/dashboard/data/EmployeeStatus";
import InfoBuild from "@/views/dashboard/data/InfoBuild";
import DeviceMonitor from "./DeviceMonitor";
import NetworksFinancing from "@/views/dashboard/data/NetworksFinancing";
import DeviceTrend from "@/views/dashboard/data/DeviceTrend";
import GlobalDevelop from "@/views/dashboard/data/GlobalDevelop";
import VScaleScreen from "v-scale-screen";
import Map from "./Map";

export default defineComponent({
	name: "Index",

	setup() {
		return () => (
			<VScaleScreen width="1920" height="1080">
				<div
					class={"w-full h-full  p-2  box-border flex flex-col"}
					style={{
						"background-image": `url('${bg}')`,
						"background-repeat": "no-repeat",
						"background-size": "100% 100%"
					}}
				>
					<div class={"w-full h-[55px]"}>
						<img class={"w-full h-[55px]"} src={bg_title} alt=""></img>
					</div>
					<div class={"w-full h-full  flex flex-row box-border"}>
						<div class={"left w-1/4 h-full flex flex-col"}>
							<Card1 class={"w-full "} />
							<RecourseBuild class={"w-full "} />
							<EmployeeStatus class={"w-full "} />
							<InfoBuild class={"w-full h-fit "} />
						</div>
						<div class={"center w-1/2 h-full flex flex-col"}>
							<div class={"flex flex-row w-full h-[20%] text-white px-20 box-border justify-center item.scss-center"}>
								<div class={"w-fit mx-16"}>
									<div>全国安装设备</div>
									<div class={"flex flex-row items-center mt-2"}>
										<div class={"text-[40px] leading-[40px] h-[40px] mr-1"}>365392</div>
										<div class={"text-[13px] leading-[13px] h-[13px]"}>台</div>
									</div>
								</div>
								<div class={"w-fit mx-16"}>
									<div>全国在线设备</div>
									<div class={"flex flex-row items-center mt-2"}>
										<div class={"text-[40px] leading-[40px] h-[40px] mr-1"}>265327</div>
										<div class={"text-[13px] leading-[13px] h-[13px]"}>台</div>
									</div>
								</div>
							</div>
							<Map class={"w-full"}></Map>
							{/*<Map class={"w-full"} src={icon} alt={""} />*/}
						</div>
						<div class={"right w-1/4 h-full flex flex-col "}>
							<DeviceMonitor class={"w-full h-1/4"}></DeviceMonitor>
							<NetworksFinancing class={"w-full h-fit"}></NetworksFinancing>
							<DeviceTrend class={"w-full h-full"}></DeviceTrend>
							<GlobalDevelop class={"w-full h-fit"}></GlobalDevelop>
						</div>
					</div>
				</div>
			</VScaleScreen>
		);
	}
});
